<!--  -->
<template>
  <div>
      <Card>
          <div slot="title">
                <Row :gutter="10">
                    <Col :span="6">
                        <Select v-model="timeOption" @on-change="timeChange" >
                            <Option  v-for="item in timeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </Col>
                    <Col :span="6">
                        <DatePicker v-if="timeOption==='auto'" type="daterange" v-model="dateRange"  placement="bottom-end"  ></DatePicker>
                        <!-- <p v-else>{{dateRange[0]}}至{{dateRange[1]}}</p> -->
                    </Col>
                    <Col :span="6">
                        <Button @click="viewData"  class="zh-hollow" type="primary" icon="ios-search-strong" >查询</Button>
                    </Col>
                </Row>
          </div>
          <Tabs type="card" @on-click='handleclickTabs' v-model="tabnames">
                <TabPane name="fault" label="故障类型">
                    <Row v-if="tabfault">
                        <Col :span="12">
                        <pie :id='piedata.id' :name="piedata.name"  :data="pie_data"></pie>
                        </Col>
                        <Col :span="12">
                            <Table :columns="tableFaultColumnList" :data="tableFaultData" border></Table>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane name="device" label="设备类型">
                    <Table :loading="deviceLoading" border :columns="deviceColumns" :data="deviceData"></Table>
                    <Page  :total="eptotal" show-total show-sizer :current.sync="eppageNumber" @on-change="eppageChange" @on-page-size-change="eppageSizeChange"></Page>
                </TabPane>
                <TabPane name="dot" label="网点分布">
                    <Form :model="formItem" :label-width="60">
                        <Row :gutter="15">
                            <Col :span="10">
                                <FormItem label="所在地">
                                    <Cascader change-on-select @on-change="dotChange" v-model="formItem.location" placeholder="请选择省市区" :data="areasData" ></Cascader>
                                </FormItem>
                            </Col>
                            <Col :span="8" v-if="user_type!='01'">
                                <FormItem label="客户">
                                    <Select v-model="formItem.customer" filterable @on-change="dotChangeC"> 
                                        <Option  v-for="item in customerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>

                    <Table :loading="dotLoading" border :columns="columns" :data="dotData"></Table>
                    <Page  :total="dottotal" show-total show-sizer :current.sync="eppageNumber" @on-change="dotpageChange" @on-page-size-change="dotpageSizeChange"></Page>
                </TabPane>
                <TabPane name="dealway" label="处理方式">
                    <Form :model="formItem2" :label-width="60">
                        <Row :gutter="15">
                            <Col :span="10">
                                <FormItem label="所在地">
                                    <Cascader change-on-select @on-change="dealChange" v-model="formItem2.location" placeholder="请选择省市区" :data="areasData" ></Cascader>
                                </FormItem>
                            </Col>
                            <Col :span="8" v-if="user_type!='01'">
                                <FormItem label="客户">
                                    <Select @on-change="dealChangeC" v-model="formItem2.customer" filterable >
                                        <Option  v-for="item in customerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            
                        </Row>
                    </Form>
                    <stackedBar v-if="tabSbar" id="sbar" 
                        :firsttype="sbarData.firsttype"
                        :secondtype="sbarData.secondtype"
                        :data="sbar_data"
                        >
                    </stackedBar>
                </TabPane>
          </Tabs>
      </Card>
  </div>
</template>

<script>
import util from '@/libs/util.js'
import pie from '@/components/echarts/pie.vue'
import stackedBar from '@/components/echarts/stackedBar.vue'
import {
    getFaultTypeData,
    getEpTableData,
    getDotTableData,
    getDealWayData
} from '@/libs/get.js'
export default {
    name:'',
    components:{
        pie,
        stackedBar
    },
    data () {
        return {
            dottotal:0,
            dotpageNumber:1,
            dotpageSize:10,
            user_type:'',
            userUuid:'',
            eptotal:0,
            eppageNumber:1,
            eppageSize:10,
            tabfault:false,
            tabSbar:false,
            form:{
                year:'',
                month:'',
                week:'',
                startTime:'',
                endTime:''
            },
            sbar_data:[],
            sbarData:{
                firsttype:'远程处理',
                secondtype:'现场处理',
            },
            dotData:[
                {
                    customer:'邮储银行江苏省分行',
                    mechanism:'南京市分行',
                    count:42,
                    ratio:42
                },
                {
                    customer:'业银行南京分行',
                    mechanism:'京中山路支行',
                    count:58,
                    ratio:58
                }
            ],
            columns:[
                {
                    key:'customerName',
                    title:"客户"
                },
                {
                    key:'instName',
                    title:'机构',
                },
                {
                    key:'count',
                    title:'故障数量',
                    sortable: true,
                    width:110
                },
                {
                    key:'proportion',
                    title:'比例',
                    render:(h,params)=>{
                        return h('Progress',{
        
                            props:{
                                percent:params.row.proportion
                            }
                        })
                    }
                }
            ],
            dotTotal:5,
            dotLoading:false,
            deviceData:[],
            deviceColumns:[
                {
                    key:'equipType',
                    title:"设备类型"
                },
                {
                    key:'count',
                    title:'故障数量',
                    sortable: true
                },
                {
                    key:'proportion',
                    title:'比例',
                    render:(h,params)=>{
                        console.log(params.row.proportion)
                        return h('Progress',{
        
                            props:{
                                percent:params.row.proportion
                            }
                        })
                    }
                }
            ],
            deviceTotal:5,
            deviceLoading:false,
            tableFaultData:[],
            pie_data:[],
            piedata:{
                id:'pie-fault-1',
                name:'故障设备类型',
                colorRange:['#61A0A8','#D48265','#91C7AE','#749F83','#CA8622']
            },
            tableFaultColumnList:[
                {
                    title: '设备类型',
                    key: 'name'
                },
                {
                    title: '故障数量',
                    key: 'value',
                    sortable: true
                },
                {
                    title: '比例',
                    key: 'ratio',
                    sortable: true
                },
            ],
            tabnames:'fault',
            timeOption:'week',
            dateRange:[],
            timeList:[
                {
                    label:'最近一周',
                    value:'week'
                },
                {
                    label:'最近一月',
                    value:'month'
                },
                {
                    label:'最近一年',
                    value:'year'
                },
                {
                    label:'自定义',
                    value:'auto'
                }
            ],
            formItem:{
                location:['','',''],
                customer:''
            },
            formItem2:{
                location:['','',''],
                customer:''
            },
            areasData:this.$store.state.user.areaData,
            customerList:[],
        };
    },
    methods:{
        viewData(){
            if(this.tabnames=='fault'){
                this.getPieData();
            }else if(this.tabnames=='device'){
                this.getTypeData();
            }
            else if(this.tabnames=='dot'){
                this.getDotData();
            }else if(this.tabnames=='dealway'){
                this.getDealWayTable()
            }
        },
        getArguments(){
            if(this.timeOption=='week'){
                return {week:'week'}
            }else if(this.timeOption=='month'){
                return {month:'month'}
            }else if(this.timeOption=='year'){
                return {month:'year'}
            }else if(this.timeOption=='auto'){
                if(!this.dateRange[0]){
                    this.$Notice.error({
                        desc:'请输入起始时间'
                    })
                    return false
                }
                return {
                    startTime:this.dateRange[0],
                    endTime:this.dateRange[1]
                }
            }
        },
        timeChange(val){
            if(val!=='auto'){
                this.dateRange=[]
            }
        },
        async getPieData(){
            this.tabfault=false;
            let form =this.getArguments();
            if(!!form){
                let res=await getFaultTypeData(form);
                let response=res.data;
                if(response.code==200){
                    let total=response.data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0});
                    this.pie_data=response.data.map(item=>{
                            return {
                                value:item.count,
                                name:item.type_name
                            }
                        });
                        this.tableFaultData=this.pie_data.map(item=>{
                            let {value,name,ratio}=item;
                            ratio=(item.value*100/total.count).toFixed(2)+'%';
                            return {value,name,ratio}
                        });
                        this.tabfault=true;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
          
        },
        async getTypeData(){
            let form =this.getArguments();
            if(!!form){
                this.deviceLoading=true;
                form.pageNumber=this.eppageNumber;
                form.pageSize=this.eppageSize;
                let res=await getEpTableData(form);
                let response=res.data;
                if(response.code==200){
                    this.eptotal=response.data.totalRow;
                    this.deviceData=response.data.list;
                    this.deviceLoading=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
        },
        eppageChange(num){
            this.eppageNumber=num;
            this.getTypeData()
        },
        eppageSizeChange(size){
            this.eppageNumber=1;
            this.eppageSize=size;
            this.getTypeData()
        },
        async getDotData(){
            let form =this.getArguments();
            if(!!form){
                this.dotLoading=true;
                form.pageNumber=this.dotpageNumber;
                form.pageSize=this.dotpageSize;
                form.customerUuid=this.formItem.customer;
                form.province=this.formItem.location[0];
                form.city=this.formItem.location[1];
                form.district=this.formItem.location[2];
                console.log(form)
                console.log(this.formItem.location)
                let res=await getDotTableData(form);
                let response=res.data;
                if(response.code==200){
                    this.dottotal=response.data.totalRow;
                    this.dotData=response.data.list;
                    this.dotLoading=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
        },
        dotpageChange(num){  
            this.dotpageNumber=num;
            this.getDotData()
        },
        dotpageSizeChange(size){
            this.dotpageNumber=1;
            this.dotpageSize=size;
            this.getDotData()
        },
        dotChange(val){
            this.formItem.location=val;
            this.getDotData();
        },
        dotChangeC(val){
            this.formItem.customer=val;
            this.getDotData();
        },
        async getDealWayTable(){
            this.tabSbar=false;
            let form =this.getArguments();
            if(!!form){
                form.customerUuid=this.formItem2.customer;
                form.province=this.formItem2.location[0];
                form.city=this.formItem2.location[1];
                form.district=this.formItem2.location[2];
                let res=await getDealWayData(form);
                let response=res.data;
                if(response.code==200){
                    this.sbar_data[0]={
                        value1:response.data.remote,
                        value2:response.data.scene
                    };
                    this.tabSbar=true;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
        },
        dealChange(val){
            this.formItem2.location=val;
            this.getDealWayTable();
        },
        dealChangeC(val){
            this.formItem2.customer=val;
            this.getDealWayTable();
        },
        handleclickTabs(name){
            if(name=='fault'){
                this.getPieData()
            }else if(name=='device'){
                this.eppageNumber=1;
                this.eppageSize=10;
                this.getTypeData();
            }else if(name=='dot'){
                this.formItem={
                    location:['','',''],
                    customer:''
                };
                this.dotpageNumber=1;
                this.dotpageSize=10;
                this.getDotData();
            }else if(name=='dealway'){
                this.formItem2={
                    location:['','',''],
                    customer:''
                };
                this.tabSbar=false;
                this.getDealWayTable();
            }
        }
    },
    created(){
        let that=this;
        let timer;
        if(that.user_type!=='01'){
            timer=setInterval(()=>{
                if(that.$store.state.user.customer.length>0){
                    that.customerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
                    clearInterval(timer)	
                }
            },500);
        }
        // setTimeout(()=>{
		// 		that.areasData=that.$store.state.user.areaData;
		// 		if(that.user_type!=='01'){
		// 		that.customerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
		// 		}
		// 	},5000);
        util.isCustomer(this);
        this.getPieData();
    }
}

</script>
<style lang='scss' >
</style>